<template>
  <div style="height: 600px">
    <el-auto-resizer>
      <template #default="{ height, width }">
        <el-table-v2
          :columns="columns"
          :data="tableData"
          :width="width"
          :height="height"
          fixed
        />
      </template>
    </el-auto-resizer>
  </div>
</template>

<script setup>
import { ref, onMounted} from 'vue'
import { ElInput, ElInputNumber } from 'element-plus'
import axios from 'axios';

const base_url = "http://10.82.14.162:8000/szw/"
const tableData = ref([])


const InputCell = ({
  value,
  onChange,
  forwardRef,
}) => {
  return (
    <ElInput ref={forwardRef} onInput={onChange} modelValue={value} />
  )
}

const InputNumCell = ({
  value,
  onChange,
  forwardRef,
}) => {
  return (
    <ElInputNumber ref={forwardRef} onInput={onChange} modelValue={value} />
  )
}


const getSzwData = () => {
  axios.get(base_url).then(res => {
    tableData.value = res.data
  }).catch(err => {
    console.log(err);
  })
}

const cellRendererFun = ({ rowData, column }) => {
  const onChange = (value) => {
    console.log('onchange')
    rowData[column.dataKey] = value
  }
  const onEnterEditMode = () => {
    console.log('onEnterEditMode')
    rowData.editing = true
    column.editing = true
  }
  const onExitEditMode = () => {
    console.log('onExitEditMode')
    rowData['total'] = rowData['yuexian'] + rowData['ruqin'] + rowData['juji'] + rowData['paowu']
    axios.put(rowData.url, rowData)
    
    rowData.editing = false
    column.editing = false
  }
  const input = ref()
  const setRef = (el) => {
    input.value = el
    if (el) {
      el.focus?.()
    }
  }
  return (rowData.editing && column.editing) ? (
    column.dataKey == 'desc' ? (
      <InputCell
        forwardRef={setRef}
        value={rowData[column.dataKey]}
        onChange={onChange}
        onBlur={onExitEditMode}
        onKeydownEnter={onExitEditMode}
      />
    ) : (
      <InputNumCell
        forwardRef={setRef}
        value={rowData[column.dataKey]}
        onChange={onChange}
        onBlur={onExitEditMode}
        onKeydownEnter={onExitEditMode}
      />
    )
    
  ) : (
    <div class="table-v2-inline-editing-trigger" onClick={onEnterEditMode}>
      {rowData[column.dataKey]}
    </div>
  )
}

const columns = [
  {
    key: 'date',
    title: '日期',
    dataKey: 'date',
    width: 150,
    // fixed: TableV2FixedDir.LEFT,
  },
  {
    key: 'yuexian',
    title: '越线',
    dataKey: 'yuexian',
    width: 150,
    align: 'center',
    cellRenderer: ({ rowData, column }) => {
      return cellRendererFun({rowData, column})
    }
  },
  {
    key: 'ruqin',
    title: '入侵',
    dataKey: 'ruqin',
    width: 150,
    align: 'center',
    cellRenderer: ({ rowData, column }) => {
      return cellRendererFun({rowData, column})
    }
  },
  {
    key: 'juji',
    title: '聚集',
    dataKey: 'juji',
    width: 150,
    align: 'center',
    cellRenderer: ({ rowData, column }) => {
      return cellRendererFun({rowData, column})
    }
  },
  {
    key: 'paowu',
    title: '高空抛物',
    dataKey: 'paowu',
    width: 150,
    align: 'center',
    cellRenderer: ({ rowData, column }) => {
      return cellRendererFun({rowData, column})
    }
  },
  {
    key: 'total',
    title: '总报警数',
    dataKey: 'total',
    width: 100,
    align: 'center',
  },
  {
    key: 'desc',
    title: '备注',
    dataKey: 'desc',
    width: 150,
    align: 'center',
    cellRenderer: ({ rowData, column }) => {
      return cellRendererFun({rowData, column})
    }
  },
  {
    key: 'operations',
    title: '操作',
    width: 150,
    align: 'center',
    cellRenderer: ({ rowData, column}) => {
      const deleteRow = () => {
        axios.delete(rowData.url).then(() => {
          getSzwData()
        }).catch(err => {
          console.log(err);
        })
      }
      return (<ElButton size="small" type="danger" onClick={deleteRow}>删除</ElButton>)
      // return (<ElButton size="small" type="danger">Delete</ElButton>)
    }
  },
]

onMounted(() => {
  getSzwData();
})
</script>

<style>
.table-v2-inline-editing-trigger {
  border: 1px transparent dotted;
  padding: 4px;
}

.table-v2-inline-editing-trigger:hover {
  border-color: var(--el-color-primary);
}
</style>
